/**
 * @author Created by qiush on 2017-07-03.
 */

import * as React from 'react';

import store from '../../store/index';
import {ActionType} from '../../store/ActionType';

import {IDesign} from '../../types/IDesign';

export interface TabTitleProps {
  design: IDesign;
  designName: string;
  isActive: boolean;
  tabStyle?: React.CSSProperties;
}

class TabTitle extends React.Component<TabTitleProps, undefined> {

  render() {
    const {design, designName, isActive, tabStyle} = this.props;
    const className: string = `Tab-title ${isActive ? 'Tab-title-active' : ''}`;
    return (
      <div key={design.id} className={className} onClick={this.changeActiveDesign} style={tabStyle}>
        <div className="Tab-title-background">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <symbol id="topleft" viewBox="0 0 214 29">
                <path d="M14.3 0.1L214 0.1 214 29 0 29C0 29 12.2 2.6 13.2 1.1 14.3-0.4 14.3 0.1 14.3 0.1Z"/>
              </symbol>
              <symbol id="topright" viewBox="0 0 214 29">
                <use xlinkHref="#topleft"/>
              </symbol>
              <clipPath id="crop">
                <rect className="mask" width="100%" height="100%" x="0"/>
              </clipPath>
            </defs>
            <svg width="50%" height="100%" transform="scale(-1, 1)">
              <use xlinkHref="#topleft" width="214" height="29" className="Tab-title-background"/>
              <use xlinkHref="#topleft" width="214" height="29" className="Tab-title-shadow"/>
            </svg>
            <g transform="scale(-1, 1)">
              <svg width="50%" height="100%" x="-100%" y="0">
                <use xlinkHref="#topright" width="214" height="29" className="Tab-title-background"/>
                <use xlinkHref="#topright" width="214" height="29" className="Tab-title-shadow"/>
              </svg>
            </g>
          </svg>
        </div>
        <div className="Tab-title-favicon"/>
        <div className="Tab-title-title">{designName}</div>
        <div className="Tab-title-close" onClick={this.removeDesign}/>
      </div>
    );
  }


  private changeActiveDesign = () => {
    store.dispatch({
      type: ActionType.ACTIVE_DESIGN,
      designId: this.props.design.id
    });
  }

  private removeDesign = (event: React.MouseEvent<HTMLElement>) => {
    event.stopPropagation();
    store.dispatch({
      type: ActionType.REMOVE_DESIGN,
      designId: this.props.design.id
    });
  }
}

export default TabTitle;
